<template>
    <!-- 订单评论 -->
    <div class="comment" style="border: none;width: 100%;">
        <!-- 顶部导航栏 -->
        <div class="header">
            <div class="navbar">
                <span @click="$router.go(-1)" style="float: left;padding-left: 20px;font-size: 14px;">返回</span>
                <span>订单评论</span>
            </div>
        </div>
        <!-- 订单评论区域 -->
        <div class="commentCard">
            <!-- 商品信息 -->
            <div class="productInfo" v-for="order in orderLines" :key="order.id">
                <!-- 左边 商品图片 -->
                <div class="productImg"><img :src="order.product.photo"></div>
                <!-- 右边 商品标题 -->
                <div class="productTitle"><strong>{{order.product.name}}</strong></div>
            </div>
            <!-- 评价 好评 中评 差评 -->
            <div class="threeComment">
                <div>描述相符</div>
                <div :style="colorComment1" @click="clickOrder1">
                    <van-icon name="flower-o" />好评</div>
                <div :style="colorComment2" @click="clickOrder2">
                    <van-icon name="flower-o" />中评</div>
                <div :style="colorComment3" @click="clickOrder3">
                    <van-icon name="flower-o" />差评</div>
            </div>
            <!-- 评论内容 输入框 -->
            <div class="orderInput">
                <van-field :border="true" v-model="content" rows="2" type="textarea" maxlength="50"
                    placeholder="请输入评论内容" show-word-limit />
            </div>
            <!-- 提交评论按钮 -->
            <div class="subComment">
                <div class="subCommentBtn" @click="subComment">提交评论</div>
            </div>
        </div>
    </div>
</template>
<script>
    import {
        get,
        post,
        post_json
    } from '@/http/axios'
    export default {
        data() {
            return {
                // 订单id
                orderId: 0,
                // 顾客id
                customerId: 0,
                // 订单评论具体信息
                content: '',
                // 订单信息
                orderLines: '',
                colorComment1: '',
                colorComment2: '',
                colorComment3: ''
            }
        },
        methods: {
            // 根据id查询订单详情
            async orderDetailById(id) {
                let res = await get('/order/findById', {
                    id
                })

                this.orderLines = res.data.data.orderLines
            },
            // 评论样式
            clickOrder1() {
                this.colorComment1 = 'color:red'
                this.colorComment2 = ''
                this.colorComment3 = ''

            },
            clickOrder2() {
                this.colorComment2 = 'color:red'
                this.colorComment3 = ''
                this.colorComment1 = ''

            },
            clickOrder3() {
                this.colorComment3 = 'color:red'
                this.colorComment2 = ''
                this.colorComment1 = ''

            },

            // 提交评论
            async subComment() {
                let data = {
                    orderId: this.orderId,
                    customerId: this.customerId,
                    content: this.content
                }
                let res = await post("/orderComment/submit", data)
                if (res.data.status == 200) {
                    this.$dialog.alert({
                        message: '评论成功',
                    }).then(() => {
                        // on close
                        this.$router.go(-1)
                    });
                }
            }

        },
        created() {
            this.orderId = this.$route.query.orderId
            this.customerId = this.$route.query.customerId
            this.orderDetailById(this.orderId)
        },
    }
</script>
<style scoped>
    .navbar {
        background-image: linear-gradient(135deg, #4CF6FC 7%, #3C7FB2 59%);
        height: 46px;
        text-align: center;
        color: #fff;
        width: 100%;
    }

    .navbar span {
        color: #fff;
        margin-top: 0;
        line-height: 46px;
    }

    /* 评论卡片 */
    .commentCard {
        box-sizing: border-box;
        border-radius: 5px;
        width: 95%;
        margin: 0 auto;
        /* box-shadow: 0 0 5px 0 #eadaff; */
        background-color: #f8f4fe;
        padding: 10px;
        margin-top: 10px;

    }

    .commentCard .productInfo {
        display: flex;
    }

    /* 商品图片 */
    .commentCard .productImg {
        width: 80px;
        height: 80px;
        /* border: 1px solid #ccc; */
    }

    .commentCard .productImg img {
        width: 80px;
        height: 80px;
    }

    .commentCard .productTitle {
        /* box-sizing: border-box; */
        /* padding: 10px; */
        padding-left: 10px;
        color: #333;
        width: 80%;
        height: 80px;
        /* border: 1px solid #ccc; */
        box-shadow: 0 0 5px 0 #eadaff;
    }

    /* 好中差评 */
    .threeComment {
        margin: 10px 0;
        display: flex;
        justify-content: space-between;
    }

    /* 输入框 */
    .orderInput {
        border: 1px solid #ccc;
    }

    .subCommentBtn {
        width: 53%;
        height: 40px;
        background-image: linear-gradient(135deg, #4CF6FC 7%, #3C7FB2 59%);
        text-align: center;
        color: #fff;
        border-radius: 22px;
        line-height: 40px;
        margin: 0 auto;
        margin-top: 2em;
        cursor: pointer;
    }

    /* 提交按钮 */
    .subComment {
        margin: 0 auto;
    }
</style>